
import React from 'react';
import Clipboard from 'clipboard/dist/clipboard';
import close from 'common/asset/img/award/close.png';
import tmallCopyBg from 'common/asset/img/award/tmallCopyBg.png';
import copy from 'common/asset/img/award/copy.png';
import css from './index.less';

export default class TmallCoupon extends React.Component {
  constructor(props) {
    super(props);
    this.textArea = React.createRef();
  }

  componentDidMount() {

    let clipboard = new Clipboard('#copy_btn');
    const that = this;

    clipboard.on('success', function(e) {
      alert('复制成功');
      that.props.onClose();
      // todo
    });
    clipboard.on('error', function(e) {
      console.log(e);
    });
  }

  render() {
    const { code } = this.props.lottery;
    return (
      <div className={css.mask}>
        <div className={css.goodsBox}>
          <img src={close} className={css.close} onClick={() => { this.props.onClose(); }} alt=""/>
          <img src={this.props.award.notice} className={css.bg} alt=""/>
        </div>
        <div className={css.content}>
          <img src={tmallCopyBg} className={css.bg} alt=""/>
          <div className={css.box}>
            <input className={css.input} id="textarea" type="text" readOnly={true} value={code} onChange={() => {}}/>
            <img src={copy} className={css.copyBg} alt=""/>
            <button type="button" data-clipboard-action="copy" data-clipboard-target="#textarea" id="copy_btn" className={css.submit}/>
          </div>
        </div>
      </div>
    );
  }
}
